<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮盘按钮</title>
    <style>
      /* 基本样式 */
      body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: radial-gradient(circle at center, #f9f9f9, #e9e9e9);
      }

      .wheel-btn-container {
        position: relative;
        z-index: 1000;
      }

      .main-btn {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, #1a237e, #3949ab);
        color: white;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
          0 8px 24px rgba(0, 0, 0, 0.1);
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
        z-index: 2;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .main-btn.active {
        transform: rotate(360deg);
        background: linear-gradient(135deg, #0d47a1, #1976d2);
      }

      .main-btn span {
        transition: opacity 0.3s ease;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      }

      .main-btn.active span {
        opacity: 0;
      }

      .main-btn::after {
        content: "收起";
        position: absolute;
        opacity: 0;
        transition: opacity 0.3s ease;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      }

      .main-btn.active::after {
        opacity: 1;
      }

      .sub-buttons {
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: transparent;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        list-style: none;
        padding: 0;
        margin: 0;
        opacity: 0;
        pointer-events: none;
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 1;
      }

      .main-btn.active ~ .sub-buttons {
        opacity: 1;
        pointer-events: auto;
      }

      .sub-btn {
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, #424242, #212121);
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 6px 16px rgba(0, 0, 0, 0.1);
        transform: scale(0) translate(-50%, -50%);
        transform-origin: center;
        left: 50%;
        top: 50%;
        font-size: 12px;
        transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        border: 1px solid rgba(255, 255, 255, 0.05);
      }

      .main-btn.active ~ .sub-buttons .sub-btn {
        transform: scale(1) translate(-50%, -50%);
      }

      .sub-btn-icon {
        font-size: 18px;
        margin-bottom: 3px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      }

      .sub-btn:hover {
        background: linear-gradient(135deg, #ffb300, #ffa000);
        transform: scale(1.1) translate(-50%, -50%);
        transition: all 0.2s ease;
        box-shadow: 0 5px 15px rgba(255, 179, 0, 0.2),
          0 10px 25px rgba(255, 160, 0, 0.15);
        border-color: rgba(255, 255, 255, 0.1);
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="wheel-btn-container">
      <button class="main-btn" id="mainBtn">
        <span>展开</span>
      </button>
      <ul class="sub-buttons" id="subButtons"></ul>
    </div>

    <script>
      //js部分
      // 配置项
      const wheelConfig = {
        mainBtnText: {
          expand: "展开",
          collapse: "收起",
        },
        subBtns: [
          { icon: "📅", text: "日程" },
          { icon: "📞", text: "联系" },
          { icon: "📚", text: "文档" },
          { icon: "⚙️", text: "设置" },
          { icon: "🚀", text: "加速" },
          { icon: "💡", text: "反馈" },
          { icon: "📊", text: "统计" },
        ],
        radius: 120, // 子按钮分布半径
        animationDuration: 0.6, // 动画时长（秒）
        animationEasing: "cubic-bezier(0.34, 1.56, 0.64, 1)", // 弹性动画缓动函数
      };

      // 初始化组件
      class WheelButton {
        constructor(config) {
          this.config = config;
          this.mainBtn = document.getElementById("mainBtn");
          this.subButtons = document.getElementById("subButtons");
          this.isExpanded = false;

          this.init();
          this.bindEvents();
        }

        init() {
          // 设置主按钮文本
          this.mainBtn.innerHTML = `<span>${this.config.mainBtnText.expand}</span>`;

          // 应用动画样式
          document.documentElement.style.setProperty(
            "--animation-duration",
            `${this.config.animationDuration}s`
          );
          document.documentElement.style.setProperty(
            "--animation-easing",
            this.config.animationEasing
          );

          // 生成子按钮
          this.config.subBtns.forEach((item, index) => {
            const btn = document.createElement("li");
            btn.className = "sub-btn";
            btn.innerHTML = `
                        <div class="sub-btn-icon">${item.icon}</div>
                        <div class="sub-btn-text">${item.text}</div>
                    `;

            // 计算位置
            const angle =
              (360 / this.config.subBtns.length) * index * (Math.PI / 180); // 转为弧度
            const x = Math.cos(angle) * this.config.radius;
            const y = Math.sin(angle) * this.config.radius;

            // 设置位置（相对于中心点）
            btn.style.left = `calc(50% + ${x}px)`;
            btn.style.top = `calc(50% + ${y}px)`;

            // 应用动画样式
            btn.style.transition = `all ${this.config.animationDuration}s ${this.config.animationEasing}`;

            this.subButtons.appendChild(btn);
          });
        }

        bindEvents() {
          this.mainBtn.addEventListener("click", () => this.toggle());
        }

        toggle() {
          this.isExpanded = !this.isExpanded;
          this.mainBtn.classList.toggle("active");
        }
      }

      // 初始化组件实例
      const wheelButton = new WheelButton(wheelConfig);
    </script>
  </body>
</html>
